<template>
    <div class="index">
    <el-row :gutter="30">
      <el-col class="index-head" :span="24">
        <el-col :span="18">
            <div class="index-head-left">学员学车生涯</div>
        </el-col>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :lg="18" :xl="20" class="my-artcle">
        <div class="student-select">
          <p class="student-select-title">学员查询</p>
          <el-input placeholder="输入学员证件号码" v-model="search" class="input-with-select">
						<el-button slot="append" icon="el-icon-search" @click="searchStu">查询</el-button>
					</el-input>
        </div>
        <div class="pay-method">
          <img class="no-message" v-if="!stuData.studentId" src="/static/img/no-message.jpg" alt="暂无消息">
          <div class="shengya-bg" v-else-if="stuData.studentId">
            <span class="yuan"></span>
            <div class="shengya-logo"><img src="static/img/shengya-logo.png" width="200px"></div>
            <template v-for="(item, year, index) in resultData">
              <p class="year" :key="year+index">{{year}}</p>
              <ul class="shangya-ul" :key="year">
              <li class="shengya-item" v-for="(val,index) in item" :key="index">
                <span class="shengya-date">{{$moment(val.time).format('M月D日')}}</span>
                <div class="shengya-item-con">
                  <img class="sanjiao" src="static/img/sanjiao.png">
                  <p class="shengya-item-con-title">{{val.title}}</p>
                  <p class="shengya-item-con-text">{{val.content}}</p>
                </div>
              </li>
            </ul>
            </template>
          </div>
        </div>
      </el-col>
      <el-col :lg="6" :xl="4">
        <student-info :stuData="stuData"></student-info>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import studentInfo from "@/components/student-info";
export default {
  name: "shengya",
  components: { studentInfo },
  data() {
    return {
      search: "",
      stuData: {},
      show: false,
      select: "",
      resultData: {}
    };
  },
  methods: {
    searchStu() {
      if (this.search != "") {
        this.$http.get(
          process.env.JXH_API_HOST + "api/student/" + this.search,
          {
            _t: Math.random()
          },
          d => {
            if (d.resultCode == 0) {
              this.stuData = d.record;
              this.loadData();
            } else {
              layer.msg(d.msg, {
                shift: 6,
                shade: 0.3
              });
              this.stuData = {};
            }
          }
        );
      }
    },
    loadData() {
      this.$http.get("iem/getStuFeeInfo/" + this.search, d => {
        if (d.status == 1) {
          console.log(d);

          let result = {};
          let year = "";
          d.data.list.forEach(e => {
            let _year = e.time.split("-")[0];
            if (year == _year) {
              result[year].push(e);
            } else {
              year = _year;
              result[year] = [];
              result[year].push(e);
            }
          });
          this.resultData = result;
        }
      });
    }
  }
};
</script>

<style scoped>
.yuan {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: #ff312b;
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -10px;
}
.shengya-item-con-text {
  line-height: 22px;
}
.shengya-item-con-title {
  font-weight: 600;
  padding-bottom: 20px;
}
.shengya-item {
  width: 100%;
  float: left;
  margin: 30px 0;
  color: #fff;
  position: relative;
}
.shengya-item-con {
  width: 240px;
  padding: 16px;
  color: #747474;
  box-shadow: 0 0 5px 1px #cecece;
  border-radius: 5px;
  position: absolute;
  top: -10px;
  left: 50%;
  margin-left: 70px;
}
.shangya-ul li:nth-child(even) .shengya-item-con {
  margin-left: -344px;
}
.sanjiao {
  position: absolute;
  left: -32px;
}
.shangya-ul li:nth-child(even) .sanjiao {
  position: absolute;
  left: 267px;
  transform: rotateY(180deg);
}
.shengya-date {
  width: 100px;
  padding: 12px 0;
  margin: 0 auto;
  display: block;
  text-align: center;
  background: url("../../static/img/nav-bg.png");
  background-size: 100% 100%;
  position: relative;
  z-index: 2;
}
.shengya-bg {
  width: 100%;
  float: left;
  background: url("../../static/img/shengya-bg.jpg") repeat-y center;
  padding: 0 0 60px 0;
  position: relative;
}
.pay-method {
  padding: 30px 0;
  height: 490px;
  overflow-y: auto;
  position: relative;
}
.shengya-logo {
  text-align: center;
  position: relative;
  top: -8px;
}
.year {
  float: left;
  text-align: center;
  color: #ff4a1d;
  background: #fff;
  font-size: 24px;
  margin: 20px 0;
  width: 100%;
}
</style>

